<link href="./dist/css/bootstrap_fileup_plus.css" media="all" rel="stylesheet" type="text/css" />
<link href="./dist/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="./dist/js/fileinput.min.js" type="text/javascript"></script>
<script src="./dist/js/axios.min.js"></script>
<script src="./dist/js/qs.min.js"></script>
<script>
    //vue
    var vu=new Vue({
        el:"#main",
        data:{
            ifGo:false,
            title:"",
            summary:"",
            img:"",
            price:"",
            ifCache:0
        },
        methods:{
            test:function () {
                alert(this.img);
            },
            submit:function () {
                this.checkValue();
                if(this.ifGo){
                    const url="/article/add";
                    var ifc=0;
                    if(this.ifCache){
                        ifc=1;
                    }else{
                        ifc=0;
                    }
                    let datas = {"title":this.title,"summary":this.summary,"img":this.img,"price":this.price,"ifCache":ifc};
                    axios.post(url,Qs.stringify(datas)).then(function(resp){
                        if(resp.data.status!=200){
                            alert(resp.data.msg);
                        }else{
                            alert("添加成功");
                        }
                    })/*.catch(resp => {
                      alert('请求失败');
                      this.changeValiCode();
                    });*/
                }

            },
            checkValue:function () {
                if(this.title==""){
                    alert("商品名称不能为空");
                    this.ifGo=false;
                    return false;
                }
                if(this.price==""){
                    alert("商品价格不能为空");
                    this.ifGo=false;
                    return false;
                }
                this.ifGo=true;

            }
        }
    }

    );
</script>
<!-- Content Header (Page header) -->
<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>新增商品</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="/">首页</a></li>
          <li class="breadcrumb-item active">新增商品</li>
        </ol>
      </div>
    </div>
  </div><!-- /.container-fluid -->
</section>

<!-- Main content -->
<section class="content" id="main">
  <div class="row">
    <div class="col-md-12">
      <div class="card card-primary">
        <div class="card-header">
          <!--<h3 class="card-title">General</h3>-->

          <div class="card-tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
              <i class="fas fa-minus"></i></button>
          </div>
        </div>
        <div class="card-body">
          <div class="form-group">
            <label for="inputName">商品名称</label>
            <input type="text" id="inputName" class="form-control" v-model="title">
          </div>
          <div class="form-group">
            <label for="inputDescription">商品简介</label>
            <textarea id="inputDescription" v-model="summary" class="form-control" rows="4"></textarea>
          </div>
          <div class="form-group">
            <label for="inputName">商品价格</label>
            <input type="text"  class="form-control" v-model="price">
          </div>
          <!--<div class="form-group">
            <label for="inputStatus">Status</label>
            <select class="form-control custom-select">
              <option selected disabled>Select one</option>
              <option>On Hold</option>
              <option>Canceled</option>
              <option>Success</option>
            </select>
          </div>-->
          <input type="hidden"  class="form-control" v-model="img"/>
          <form enctype="multipart/form-data">
            <label>商品图片</label>
            <div class="form-group">
              <input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="1"/>
            </div>
          </form>
          <div class="form-group">
            <div class="custom-control custom-switch">
              <input type="checkbox" class="custom-control-input" id="customSwitch1" v-model="ifCache">
              <label class="custom-control-label" for="customSwitch1">是否缓存</label>
            </div>
          </div>
        </div>
        <!-- /.card-body -->
      </div>
      <!-- /.card -->
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <a href="#" class="btn btn-secondary">Cancel</a>
      <input type="submit" value="提交" class="btn btn-success float-right" @click="submit"/>
    </div>
  </div>
</section>
<!-- /.content -->
<script>
    //文件上传
    $("#file-1").fileinput({
      uploadUrl: '/file/doFileUp',
      allowedFileExtensions : ['jpg', 'png','gif'],
      overwriteInitial: false,
      maxFileSize: 7000,
      maxFilesNum: 1,
      //allowedFileTypes: ['image', 'video', 'flash'],
      slugCallback: function(filename) {
          return filename.replace('(', '_').replace(']', '_');
      }
  }).on("filebatchselected", function (event, data) {//选择即上传
      if (data.length == 0) {
          return;
      }
  }).on('fileuploaded', function (event, data) {//异步上传成功结果处理
      vu._data.img=data.response.url;
      console.log(event, data);
  }).on('fileerror', function (event, data, msg) {//异步上传失败结果处理
      console.log(event, data, msg);
  }).on('fileuploaderror', function (event, data, msg) {//异步上传失败结果处理
      console.log(event, data, msg);
  }).on('filebatchuploadsuccess', function(event,data,previewId,index) {//同步上传回调
      console.log(event, data);
  });
</script>
